<template>
    <Drawer :closable="true" :mask-closable="false" :width="width" v-model="show" class="deviceDrawer" :class-name="className" :z-index="zIndex">
        <div class="drawerClose" @click="close">
            <!-- <img src="~@/assets/globalIcon/closeIcon.png" alt="Close"> -->
            <img :src="drawerFolderImage" alt="Close">
        </div>
        <!-- 头部---start -->
        <!-- 有头部插槽 -->
        <template slot="header" v-if="$slots.header">
            <slot name="header"></slot>
        </template>
        <div class="flex" slot="header" v-else>
            <!-- 选择模式 -->
            <template v-if="select">
                <div class="circle"></div>
                <div class="bigTitle">
                    <span>请选择{{title}}</span>
                    <slot name="rule"></slot>
                </div>
            </template>
            <template v-else>
                <div class="smallTitle">{{title}}</div>
            </template>
        </div>
        <!-- 头部---end -->
        <!-- 主体---start -->
        <ColPage class="drawer-content" :divider="select" :class="{'no-margin-top' : !$slots.search}">
            <template slot="top">
                <slot name="top"></slot>
                <div class="smallTitle">{{select ? title : ''}}</div>
                <div class="search-wrapper" v-if="$slots.search">
                    <slot name="search"></slot>
                </div>
            </template>
            <template slot="content">
                <slot></slot>
                <TableList drawer ref="tableList" v-bind="_props" v-on="_events" v-if="showTable" class="drawer-table"></TableList>
            </template>
            <slot name="bottom"></slot>
        </ColPage>
        <!-- 主体---end -->
    </Drawer>
</template>
<script>
    import ColPage from './page.vue'
    import propsMixin from '@/components/common/table-list/mixin'
    import { mapMutations, mapState } from 'vuex';
    export default {
        name: 'DrawerPage',
        components: {ColPage },
        mixins:[propsMixin],
        props: {
           title:{
            type:String,
            default:''
           },
           select:{
            type:Boolean,
            default:false
           },
           value:{
            type:Boolean,
            default:false
           },
           width:{
            default:1000
           },
           className:{
            type:String,
            default:''
           },
           zIndex:{
            type:Number,
            default:1000
           }
        },
        computed: {
            showTable() {
                let props = Object.keys(this.$options.propsData);
                return props.includes('columns') && props.includes('data');
            },
            ...mapState('style', {
                drawerFolderImage: ({ themeConfig }) => {
                    return themeConfig.drawerFolderImage;
                }
            })
        },
        data() {
            return {
                show:this.value
            };
        },
        watch:{
            value(val){
                this.show = val;
                if(this.$refs.tableList){
                    this.$refs.tableList.init();
                    // this.$refs.tableList.init = false;
                    // this.$refs.tableList.setPagination()
                }
            },
            show(val){
                this.$emit('on-visible-change',val);
                if(!val){
                    this.$emit('input', false);
                    this.$emit('on-close');
                }
            }
        },
        mounted(){
            
        },
        methods: {
            close(){
                this.show = false;
            },
            delSelectItem(id){
                this.$refs.tableList.delSelectItem(id)
            },  
            closeItem(val){
                this.$refs.tableList.closeItem(val)
            }
        }
    };
</script>
<style scoped>
    .flex {
        display: flex;
        align-items: center;
    }
    .bigTitle{
        margin-left: 5px;
        font-size: 18px;
        font-weight: 700
    }
    .smallTitle{
        font-size: 14px;
        font-weight: bold
    }
    .circle {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background-color: #333;
    }
    .drawerClose{
        position: absolute;
        top: 70px;
        left: -17px;
        cursor: pointer
    }
    .drawerClose img {
        width: 20px;
    }
    .deviceDrawer{
        position: relative;
    }
    .deviceDrawer /deep/ .ivu-drawer-body{
        overflow: inherit;
        display: flex;
        flex-direction: column;
    }
    .no-margin-top /deep/ .pt-content-wrap{
        margin-top:0;
    }
    .drawer-content /deep/ .pt-content-wrap{
        padding-top:0;
        top:0;
        flex: auto;
        height:0;
    }
    .drawer-table /deep/ .page-wrapper {
        position: sticky;
        bottom: 0px;
        background: var(--drawer-bgcolor);
    }
</style>